<template lang="html">
  <div class="littel-upload">
    <el-dialog v-model="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-upload
      class="upload-demo"
      multiple
      list-type="picture-card"
      action="https://api.zgwyzxw.cn/files"
      :headers="headers"
      :data="prefix"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      ref="upload"
      :file-list="fileList"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import {loadToken} from 'common/js/cache.js'

import {getPictures} from 'api/uploadPicture.js'

import {delList} from 'api/article.js'

export default {
  props: {
    path: {
      type: String
    }
  },
  created() {
    this._getPictures()
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': `Bearer ${loadToken()}\n`
      }
    },
    prefix() {
      return {
        prefix: 'picture/' + this.path + '/'
      }
    }
  },
  methods: {
    handleSuccess() {
      console.log(1111)
    },
    _getPictures() {
      let path = 'picture/' + this.path + '/'
      getPictures(path, loadToken()).then((res) => {
        this.fileList = res.data
      })
    },
    handleRemove(file, fileList) {
      let id = file.id
      this._delList(id)
    },
    _delList(id) {
      delList(id, loadToken()).then((res) => {
        this.$message({
          type: 'success',
          message: '图片删除成功'
        })
      })
    }
  }
}
</script>

<style lang="css">
</style>
